<template>
  <div>
    <checked-title title="巡查情况"></checked-title>
    <div id="xunchaqingkuang" ref="echarts" style="height: 350px;"></div>
  </div>
</template>

<script>
import { YingPanShiDian } from '@/api'
export default {
  data() {
    return {}
  },
  methods: {
    getList(){
      YingPanShiDian.getNearlyWeekPatrol().then(res=>{
        this.initchart(res.data)
      })
    },
    initchart(data) {
      let XaxioName = []
      XaxioName = data.listCount.map(ite=>{
        let as = ite.date.split('-')
        return as[1] + '.' + as[2]
      })

      let linListOne = data.listCount.map(ite =>  ite.count)
      let linListTwo = data.listSumDistance.map(ite =>  ite.count)
      let linListThree = data.listSumTime.map(ite =>  ite.count)

      let chartxuncha = null
      chartxuncha = echarts.init(document.getElementById('xunchaqingkuang'))
      const colors = ['#5470C6', '#EE2167', '#91CC75', '#EE32FF', '#FFCC1F']

      
      let option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
        },
        grid: {
          // right: '10%',
          left: '5%', // 固定左边刻度宽度
          right: '5%',
          bottom: '5%',
          containLabel: true,
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#fff',
          },
          data: ['巡查记录', '巡查里程', '巡查用时'],
        },
        dataZoom: {
          show: false,
          startValue: 0,
          endValue: 11,
        },
        xAxis: [
          {
            type: 'category',
            show: true,
            boundaryGap: true,
            axisLabel: {
              color: '#fff',
              interval: 0,
              rotate: '20',
              textStyle: {
                color: '#9EADC9',
              },
            },
            // 刻度线
            axisTick: {
              show: true,
            },
            // 坐标线
            axisLine: {
              show: true,
              lineStyle: {
                color: '#9ED5FF',
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(4, 187, 255, 1)',
              },
            },
            data: XaxioName,
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位： 件',
            scale: true,
            textStyle: {
              color: '#fff',
            },
            splitArea: {
              show: false,
            },
            // 刻度线
            axisTick: {
              show: true,
            },
            // 坐标线
            axisLine: {
              show: true,
              lineStyle: {
                color: '#9ED5FF',
              },
            },
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              color: '#fff',
              formatter: 1000,
            },
            // 分割线
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9',
              },
            },
          },
        ],
        series: [
          //曲线
          {
            name: '巡查记录',
            type: 'line',
            data: linListOne,
            symbol: 'circle',
            smooth: true,
            zlevel: 3,
            symbolSize: 8,
            lineStyle: {
              shadowBlur: 10,
              width: 4,
              color: '#FF5666',
            },
            itemStyle: {
              color: '#FF5666',
              borderWidth: 2,
              borderColor: '#fff',
            },
          },
          {
            name: '巡查里程',
            type: 'line',
            data: linListTwo,
            symbol: 'circle',
            smooth: true,
            zlevel: 3,
            symbolSize: 8,
            lineStyle: {
              shadowBlur: 10,
              width: 4,
              color: '#FEBA03',
            },
            itemStyle: {
              color: '#FEBA03',
              borderWidth: 2,
              borderColor: '#fff',
            },
          },
          {
            name: '巡查用时',
            type: 'line',
            data: linListThree,
            symbol: 'circle',
            smooth: true,
            zlevel: 3,
            symbolSize: 8,
            lineStyle: {
              shadowBlur: 10,
              width: 4,
              color: '#077FFF',
            },
            itemStyle: {
              color: '#077FFF',
              borderWidth: 2,
              borderColor: '#fff',
            },
          },
        ],
      }
      chartxuncha.setOption(option, true)
    },
    desHander() {
      let myChart = echarts.init(this.$refs.echarts)
      myChart.dispose()
    },
  },
  mounted() {
    this.getList()
  },
  beforeDestroy() {
    this.desHander()
  },
}
</script>
<style lang="less" scoped></style>
